<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <form>
            
            用户名: <input type="text" v-model="user.username" > <br>
            密码: <input type="text" v-model="user.password"><br>
            邮箱: <input type="text" v-model="user.email"><br>
            QQ: <input type="text" v-model="user.qq"><br>
            验证码: <input type="text" v-model="user.code"><br>

            <input type="button" @click="reg" value="注册"/>
        </form>
    </div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//代表vue实例作用范围
        data:{    //用来vue实例绑定数据
            msg:"hello vue111",
            user:{},
        },
        methods: { //用来给vue实例定义一些列的相关方法
            reg(){
                //1.获取form数据
                console.log(this.user);
                //2.发送ajax请求
            }
        }
    });
</script>